<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html><!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>会议室浏览</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css-v=3.3.5.css"
          tppabs="http://www.zi-han.net/theme/hplus/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="css/font-awesome.min.css-v=4.4.0.css"
          tppabs="http://www.zi-han.net/theme/hplus/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">

    <!-- Data Tables  -->
    <link href="css/plugins/dataTables/dataTables.bootstrap.css"
          tppabs="http://www.zi-han.net/theme/hplus/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">

    <link href="css/animate.min.css" tppabs="http://www.zi-han.net/theme/hplus/css/animate.min.css"
          rel="stylesheet">
    <link href="css/style.min.css-v=4.0.0.css" tppabs="http://www.zi-han.net/theme/hplus/css/style.min.css?v=4.0.0"
          rel="stylesheet">
    <link href="css/dw.css">
    <base target="_blank">
    <style>
        #zhuti{
            height: 100%;
        }
        #zhuti::before {
            background: url('img/logo1.png') no-repeat fixed center;
            content: "";
            opacity: 0.2;
        / / 透明度设置 z-index: - 1;
            width: 80%;
            height: 120%;
            position: absolute;
        }
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins" >
                <div class="ibox-title">
                    <h5>会议室详情</h5>
                    <button onclick="correctExport()" class="btn-info" style="float: right">导出Excel</button>
                </div>
                <div class="ibox-content">
                    <table id="zhuti" class="table table-striped table-bordered table-hover dataTables-example">
                        <thead>
                        <tr>
                            <th>会议室名称</th>
                            <th>会议室位置</th>
                            <th>会议室资源设备</th>
                            <th>无线会议话筒数量</th>
                            <th>无线手持话筒数量</th>
                            <th>茶杯数量</th>
                            <th shiro:hasRole="1">修改/删除</th>
                        </tr>
                        </thead>
                        <tbody id="tbody">

                        </tbody>
                        <!--                        <tfoot>-->
                        <!--                        <tr>-->
                        <!--                            <th>会议室名称</th>-->
                        <!--                            <th>会议位置</th>-->
                        <!--                            <th>会议室资源设备</th>-->
                        <!--                            <th>有线话筒数量</th>-->
                        <!--                            <th>无线手持话筒</th>-->
                        <!--                            <th>茶杯数量</th>-->
                        <!--                        </tr>-->
                        <!--                        </tfoot>-->
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery.min.js-v=2.1.4" tppabs="http://www.zi-han.net/theme/hplus/js/jquery.min.js?v=2.1.4">
</script>

<script src="js/bootstrap.min.js-v=3.3.5"
        tppabs="http://www.zi-han.net/theme/hplus/js/bootstrap.min.js?v=3.3.5"></script>

<script src="js/plugins/jeditable/jquery.jeditable.js"
        tppabs="http://www.zi-han.net/theme/hplus/js/plugins/jeditable/jquery.jeditable.js"></script>

<script src="js/plugins/dataTables/jquery.dataTables.js"
        tppabs="http://www.zi-han.net/theme/hplus/js/plugins/dataTables/jquery.dataTables.js"></script>

<script src="js/plugins/dataTables/dataTables.bootstrap.js"
        tppabs="http://www.zi-han.net/theme/hplus/js/plugins/dataTables/dataTables.bootstrap.js"></script>

<script src="js/content.min.js-v=1.0.0" tppabs="http://www.zi-han.net/theme/hplus/js/content.min.js?v=1.0.0">
</script>
<script src="./layui/layui.js"></script>
<script src="./layui/excel.js"></script>
<script>
    let listData=null;
    $(document).ready(function () {
        // 请求数据
        $.ajax({
            type: "POST",
            url: "/user/getAllMeeting",
            // data: {
            //     "pageNum": 1,
            //     "pageSize": 13
            // },
            success: function (msg) {
                console.log(msg)
                listData=msg
                // var msg1=JSON.stringify(msg);
                // var list=msg1.list;
                let str = "";
                let list = msg;
                console.log(msg);
                let tbody = document.querySelector("#tbody");
                if (list.length != 0) {
                    for (let i = 0; i < list.length; i++) {
                        let button="<a target=\"_self\" href=\"meetingChange.html?mid="+list[i].mid+"&id="+list[i].id+"&endtime="+list[i].endtime+"\"><button type=\"button\" style=\"margin-top: 6px;margin-right: 3%;\" class=\"btn btn-primary btn-xs\">修改</button></a>"
                        let button2="<button id="+list[i].id+" name="+list[i].state+" onclick='dele(this)' style=\"margin-top: 6px;\" class=\"btn btn-warning btn-xs\">删除</button>"
                        let other = "可容纳" + list[i].maxnum + "人，配置" + list[i].mes;
                        str += "<tr><td>" + list[i].name + "</td>" + "<td>" + list[i].site + "</td>" +
                            "<td>" + other + "</td><td>" + list[i].micro + "</td><td>" + list[i].wireless + "</td><td>" + list[i].teacup + "</td><td shiro:hasRole=\"1\">" + button+button2 + "</td></tr>";
                    }
                }
                tbody.innerHTML = str;
                // f();
            }
        });
    });
    //数据表格
    function f() {
        $(".dataTables-example").dataTable();
        var oTable = $("#editable").dataTable();
        oTable.$("td").editable("http://www.zi-han.net/theme/example_ajax.php", {
            "callback": function (sValue, y) {
                var aPos = oTable.fnGetPosition(this);
                oTable.fnUpdate(sValue, aPos[0], aPos[1])
            },
            "submitdata": function (value, settings) {
                return {
                    "row_id": this.parentNode.getAttribute("id"),
                    "column": oTable.fnGetPosition(this)[2]
                }
            },
            "width": "90%",
            "height": "100%"
        })
    }

    function fnClickAddRow() {
        $("#editable").dataTable().fnAddData(["Custom row", "New row", "New row", "New row", "New row"])
    };

    // 获取表格
    function getExportData() {
        var data = []
        var sj={}
        var template = {
            col1: '会议室名称',
            col2: "会议室位置",
            col3: '会议室资源设备',
            col4: '无线会议话筒数量',
            col5: '无线手持话筒数量',
            col6: '茶杯数量'
        }
        console.log(listData)
        data.push(template)
        for (var i = 0; i < listData.length; i++) {
            sj={
                col1: listData[i].name,
                col2: listData[i].site,
                col3: listData[i].mes,
                col4: listData[i].micro,
                col5: listData[i].wireless,
                col6: listData[i].teacup
            }
            data.push(sj)
        }
        return data
    }

    <!--  导出excel  -->
    function correctExport() {
        layui.use(['layer'], function () {
            layui.layer.alert('正常弹出下载');
            // 直接调用iframe中的导出函数无法弹出下载
            parent.layui.excel.exportExcel(getExportData(), '会议室详情表.xlsx', 'xlsx')
            // 嵌套层级比较多，可以考虑用 top
            // top.LAY_EXCEL.exportExcel([[1, 2, 3]], 'test.xlsx', 'xlsx')
        })
    }
    //删除页面
    function dele(msg) {
        console.log(msg.id);
        $.ajax({
            type: "POST",
            url: "/admin/deleteMeeting",
            data: {
                id:msg.id
            },
            success: function (msg) {
                layer.alert(msg)
                setTimeout(function() { window.location.href = "meetingAdmi.html"; }, 1500 );
            }
        })
    }
</script>

<script type="text/javascript" src="../../../tajs.qq.com/stats-sId=9051096"
        tppabs="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
</body>

</html>
